<!DOCTYPE html>
<html ng-app="app">
<!--让html称为 AngularJS 应用的根元素-->
	<head>
		<meta charset="utf-8">
	    <link rel="stylesheet" type="text/css" href="libs/css/bootstrap.min.css"/>
	    <link rel="stylesheet" type="text/css" href="libs/css/agularCar.css"/>
		<script src="libs/js/draw_into/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/js/draw_into/carhartl-jquery-cookie-3caf209/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/js/draw_into/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/js/agularCar.js" type="text/javascript" charset="utf-8"></script>
	
	<!--<script type="text/javascript">
	    	angular.module('app', []).controller('firstController',
				function($scope) {
				
					var arrText=$.cookie("texts").split(",");
					var arrPrice=$.cookie("price").split(",");
					var arrNumber=$.cookie("number").split(",");
					$scope.Product = [];
					$scope.Product.length = arrText.length;
					console.log(arrText[0])
					for(var i=0;i<arrText.length;i++){
						$scope.Product[i]={
							id: i+1,
							name: arrText[i],
							quantity: arrNumber[i],
							price:arrPrice[i].replace("￥","")
						}
					}

					$scope.totalPrice = function() {
						var total = 0;
						angular.forEach($scope.Product, function(item) {
							total += item.quantity * item.price;
						});
						return total;
					}

					$scope.totalQuantity = function() {
						var total = 0;
						angular.forEach($scope.Product, function(item) {
							total += parseInt(item.quantity);
						});
						return total;
					}

					$scope.remove = function(index) {
						$scope.Product.splice(index, 1);
					}

					$scope.removeall = function() {
						var index;
						for(index = $scope.Product.length - 1; index >= 0; index--) {
							$scope.remove(index);
						}
					}

					$scope.reduce = function(index) {
						if($scope.Product[index].quantity != 1) {
							$scope.Product[index].quantity--;
						} else {
							var ans = confirm("是否移除该产品？");
							if(ans) {
								$scope.remove(index);
							} else {
								$scope.Product[index].quantity = 1;
							}
						}
					}

					$scope.add = function(index) {
						$scope.Product[index].quantity++;
					}

					$scope.$watch('Product', function(newValue, oldValue) {
						angular.forEach(newValue, function(item, key) {
							if(item.quantity < 1) {
								var ans = confirm("是否移除该产品？");
								if(ans) {
									$scope.remove(key);
								} else {
									item.quantity = oldValue[key].quantity;
								}
								return;
							}
						});
					}, true);
				});
	</script>-->

	</head>
	<body>
		<div class="shanshan" >
			<div id="header">
				<div id="header_tip">
					<span>&nbsp;&nbsp;&nbsp;您好。欢迎来到亲亲宝贝！请<a href="login.html">登录</a><span class="header_tip_l">|</span><a href="#">免费注册</a>&nbsp;&nbsp;<img src="libs/img/index_img/header_img/phone.png"/>客服电话：400-610-9993</span>
				</div>
				<div id="header_logo">
					<h1><a href="#"><img src="libs/img/index_img/header_img/qinqinlogo.png"/></a></h1>
					<div id="header_list1box">
						<ul id="header_list1">
							<li ><a href="index.html" class="actives_1">首页</a> | </li>
							<li><a href="#">手商云</a> | </li>
							<li><a href="#">关于我们</a> | </li>
							<li><a href="#">商家入驻</a>  </li>
						</ul>
					</div>
					<div id="header_search" >
						<input type="text" name="" id="txt" value=""  "/>
						<input type="button" name="search" id="search" value="搜&nbsp;索" />
						<ul>
							<li><a href="list.html" class="actives">宝宝玩具</a> | </li>
							<li><a href="#">奶粉</a> | </li>
							<li><a href="#">辅食营养</a> | </li>
							<li><a href="#">尿裤</a> | </li>
							<li><a href="#">湿巾</a></li>
						</ul>
					</div>
				</div>
			</div>
		<div id="header_img"></div>
		</div>
		
		<div  style="width: auto; height: 50px; margin:  0 auto;"></div>
		<!--ng-controller 指令用于为container的div添加控制器。-->
		<div class="container" ng-controller="firstController">
			<table class="table">
				<thead>
					<tr>
						<th>产品编号</th>
						<th>产品名称</th>
						<th>购买数量</th>
						<th>产品单价</th>
						<th>产品总价</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in Product">
						<td><input type="checkbox" class="checkk"/> {{item.id}}</td>
						<td style="width: 200px;word-wrap: break-word;">{{item.name}}</td>
						<td>
							<button type="button" class="btn" ng-click="reduce($index)">-</button>
							<input type="text" name="" value="" placeholder="" ng-model="item.quantity" style="width: 100px;">
							<button type="button" class="btn" ng-click="add($index)">+</button>
						</td>
						<td>{{item.price}}</td>
						<td class="sbb">{{item.quantity*item.price}}</td>
						<td>
							<button type="button" class="btn btn-danger" ng-click="remove($index)">移除</button>
						</td>
					</tr>
					<tr>
						<td>总价格：{{totalPrice()}} 元</td>
						<td colspan="2">总购买数：{{totalQuantity()}}</td>
						<td id="sum" colspan="2">选择的的价格为:</td>
						<td>
							<button type="button" class="btn btn-danger" ng-click="removeall()">清空购物车</button>
						</td>
					</tr>
				</tbody>
			</table>
			<!--<script type="text/javascript">
				$(function(){
					var sum = 0;
					$("tr td input[type=checkbox]").click(function(){
						if ($("input[type=checkbox]").is(":checked") == true){
							sum += parseInt($(this).closest("td").siblings("td.sbb").html());
							console.log(sum);
							$("#sum").html("选择商品的价格为:"+sum);
						}else{
							sum=0;
							$("#sum").html("选择商品的价格为:"+0);
						}
					})
				})
			</script>-->
		</div>
		<div id="btn_count"><a href="#">去结算</a></div>
	</body>

</html>